/** @type {HTMLCanvasElement} */

const canvas = document.getElementById("canvas");
if (canvas.getContext) {
  let ctx = canvas.getContext("2d");
  let sun = new Image();
  let moon = new Image();
  let earth = new Image();

  function init() {
    sun.src = "https://img.lovepik.com/element/40097/4339.png_300.png";
    moon.src =
      "https://ts1.cn.mm.bing.net/th/id/R-C.f370e2bad14df3d38740131462d7d5e4?rik=L8oVwrCGJvODZQ&riu=http%3a%2f%2fimg95.699pic.com%2felement%2f40151%2f0212.png_300.png&ehk=fpj4J3Hom9OG0ObJTEcexsI2bwTbkpwsQz0nu3IGyWM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1";
    earth.src =
      "https://ts1.cn.mm.bing.net/th/id/R-C.f370e2bad14df3d38740131462d7d5e4?rik=L8oVwrCGJvODZQ&riu=http%3a%2f%2fimg95.699pic.com%2felement%2f40151%2f0212.png_300.png&ehk=fpj4J3Hom9OG0ObJTEcexsI2bwTbkpwsQz0nu3IGyWM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1";
    window.requestAnimationFrame(draw);
  }

  function draw() {
    ctx.globalCompositeOperation = "destination-over";
    // 清空画布
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
    ctx.strokeStyle = "rgba(0, 153, 255, 0.4)";
    ctx.save(); // 第一次保存画布状态
    ctx.translate(250, 250); // 把原心移到画布中间
    // 画一个地球
    var time = new Date();
    var earthDeg = ((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds();
    console.log(earthDeg);
    ctx.rotate(earthDeg);
    ctx.translate(200, 0);
    ctx.drawImage(earth, -20, -20, 40, 40);
    // 画一个月亮
    ctx.save(); // 第二次保存画布状态
    var moonDeg = ((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds();
    ctx.rotate(moonDeg);
    ctx.translate(0, 40);
    ctx.drawImage(moon, -7.5, -7.5, 15, 15);
    // // 恢复状态
    ctx.restore();
    ctx.restore();
    // // 画一个地球运行的轨迹
    ctx.beginPath();
    ctx.arc(250, 250, 200, 0, Math.PI * 2, false);
    ctx.stroke();
    // // 画一个太阳
    ctx.drawImage(sun, 0, 0, 500, 500);
    window.requestAnimationFrame(draw);
  }

  init();
}
